<template>
    <div class="container">
        <div class="header">
            <h3>客户健康度分析</h3>
            <div class="header-right">
                <el-button icon="el-icon-setting" type="primary" @click="setting">设置</el-button>
                <el-button icon="el-icon-s-custom" type="danger" @click="diagnosis">AI诊断</el-button>
            </div>
        </div>
        <el-card class="card">
            <div class="card-header">
                <h4>{{ pageInfo.name }}</h4>
                <div class="card-header-tag">
                    <el-tag v-for="(name, index) in pageInfo.client_care" size="mini" :key="index">{{ name }}</el-tag>
                </div>
            </div>
            <el-row>
                <el-col :span="12">
                    <span>客户体量：</span>
                    <span>{{ pageInfo.client_scene }}</span>
                </el-col>
                <el-col :span="12">
                    <span>租户数量:</span>
                    <span>{{ pageInfo.tenant_number }}</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span>客户阶段:</span>
                    <span>{{ pageInfo.phase }}</span>
                </el-col>
                <el-col :span="12">
                    <span>终端数量:</span>
                    <span>{{ pageInfo.updated_at }}</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span>租户创建时间:</span>
                    <span>{{ pageInfo.updated_at }}</span>
                </el-col>
                <el-col :span="12">
                    <span>传感器数量:</span>
                    <span>{{ pageInfo.sensor_number }}</span>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="card">
            <div class="card-header multiple">
                <h4>财务健康度</h4>
                <h4>关系紧密度</h4>
            </div>
            <div class="card-content">
                <div class="card-content-left">
                    <div ref="amountChart" class="echart"></div>
                    <div ref="feeChart" class="echart"></div>
                    <div class="echart">
                        <div class="echart-title">回款预测准确性</div>
                        <el-progress type="circle" :stroke-width="24" :percentage="25"></el-progress>
                    </div>
                </div>
                <div class="card-content-right">
                    <div class="line" ref="chatChart"></div>
                    <div class="line" ref="recordChart"></div>
                </div>
            </div>
        </el-card>
        <el-card class="card">
            <div class="card-header">
                <h4>使用活跃度</h4>
            </div>
            <div class="card-box">
                <div class="card-box-line" ref="loginChart"></div>
                <div class="card-box-right">
                    <div class="card-box-right-item" ref="deviceChart"></div>
                    <div class="card-box-right-item" ref="sensorChart"></div>
                </div>
            </div>
        </el-card>
        <el-card class="card">
            <div class="card-box">
                <div class="card-content-left">
                    <div ref="radarChart" class="echart" style="flex: 1;"></div>
                    <div class="echart" ref="workOrderChart">
                    </div>
                </div>
                <div class="card-box-right">
                    <div class="card-box-right-item" ref="pushChart"></div>
                    <div class="card-box-right-item" ref="alarmChart"></div>
                </div>
            </div>
        </el-card>
        <el-dialog title="AI诊断结果" :visible.sync="diagnosisDialogVisible" width="480px" :before-close="handleClose">
            <div class="rows">
                <div class="rows-title">当前客户健康程度:</div>
                <div class="rows-content">
                    <div class="rows-content-label">
                        <div :class="{ gao: pageInfo.health_level == 'green' }">高</div>
                        <div :class="{ zhong: pageInfo.health_level == 'yellow' }">中</div>
                        <div :class="{ di: pageInfo.health_level == 'red' }">低</div>
                    </div>
                </div>
            </div>
            <div class="rows">
                <div class="rows-title">预测流失概率:</div>
                <div class="rows-content">
                    <div class="rows-content-label">
                        <div>高</div>
                        <div>中</div>
                        <div>低</div>
                    </div>
                </div>
            </div>
            <el-form :model="pageInfo" label-position="left">
                <el-form-item label="建议:" label-width="140px">
                    <el-input v-model="pageInfo.client_want" autocomplete="off" readonly placeholder="请输入建议"
                        type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="save('diagnosis')" type="primary">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title="设置" :visible.sync="settingDialogVisible" width="600px" :before-close="handleClose">
            <el-form :model="settingForm" label-position="left">
                <el-form-item label="客户期望:" label-width="80px">
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox label="管理"></el-checkbox>
                        <el-checkbox label="结算"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="客户场景:" label-width="80px">
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox label="国内"></el-checkbox>
                        <el-checkbox label="国外"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="客户关心:" label-width="80px">
                    <el-form-item label="工时:" label-width="80px">
                        <div>
                            <span>准确性要求：</span>
                            <el-select v-model="value" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="准确性"></el-checkbox>
                            <el-checkbox label="怠速"></el-checkbox>
                            <el-checkbox label="有双发动机机械"></el-checkbox>
                            <el-checkbox label="台班签证单"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="油位:" label-width="80px">
                        <div>
                            <span>准确性要求：</span>
                            <el-select v-model="value" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="加油"></el-checkbox>
                            <el-checkbox label="用油"></el-checkbox>
                            <el-checkbox label="油量异常"></el-checkbox>
                            <el-checkbox label="有双油箱机械"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="运趟:" label-width="80px">
                        <div>
                            <span>准确性要求：</span>
                            <el-select v-model="value" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="围栏运趟"></el-checkbox>
                            <el-checkbox label="车挖匹配"></el-checkbox>
                            <el-checkbox label="自动记趟"></el-checkbox>
                            <el-checkbox label="货物安全"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="业务:" label-width="80px">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="设备维保"></el-checkbox>
                            <el-checkbox label="设备点检"></el-checkbox>
                            <el-checkbox label="单机单车核算"></el-checkbox>
                            <el-checkbox label="资产盘点"></el-checkbox>
                            <el-checkbox label="自定义报表"></el-checkbox>
                            <el-checkbox label="管理驾驶舱"></el-checkbox>
                            <el-checkbox label="调度大屏"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="save('setting')" type="primary">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getPageData } from "@/apis/home"

export default {
    mame: "Index",
    data() {
        return {
            diagnosisDialogVisible: false,
            settingDialogVisible: false,
            diagnosisForm: {
                name: ""
            },
            settingForm: {
                name: ""
            },
            checkList: [],
            options: [{
                value: '0',
                label: '0'
            }, {
                value: '90',
                label: '90'
            }, {
                value: '95',
                label: '95'
            }, {
                value: '98',
                label: '98'
            },],
            value: "",
            clientId: 17325,
            pageInfo: {},
            amountChartInstance: null,
            feeChartInstance: null,
            chatChartInstance: null,
            recordChartInstance: null,
            loginChartInstance: null,
            deviceChartInstance: null,
            sensorChartInstance: null,
            workOrderChartInstance: null,
            pushChartInstance: null,
            alarmChartInstance: null,
            radarChartInstance: null,
        };
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            getPageData(this.clientId).then(res => {
                this.pageInfo = res.XCmdrResult
                this.amountChartInstance = this.$echarts.init(this.$refs.amountChart);
                this.feeChartInstance = this.$echarts.init(this.$refs.feeChart);
                this.chatChartInstance = this.$echarts.init(this.$refs.chatChart);
                this.recordChartInstance = this.$echarts.init(this.$refs.recordChart);
                this.loginChartInstance = this.$echarts.init(this.$refs.loginChart);
                this.deviceChartInstance = this.$echarts.init(this.$refs.deviceChart);
                this.sensorChartInstance = this.$echarts.init(this.$refs.sensorChart);
                this.workOrderChartInstance = this.$echarts.init(this.$refs.workOrderChart);
                this.pushChartInstance = this.$echarts.init(this.$refs.pushChart);
                this.alarmChartInstance = this.$echarts.init(this.$refs.alarmChart);
                this.radarChartInstance = this.$echarts.init(this.$refs.radarChart);
                this.setPieCharts(this.workOrderChartInstance, [{ value: res.XCmdrResult.total_work_issues, name: '累计工单数' }])
                this.setAnnularChart(this.amountChartInstance, [
                    { value: res.XCmdrResult.delivery_money, name: '发货金额' },
                    { value: res.XCmdrResult.receive_money, name: '回款金额' }
                ])
                this.setAnnularChart(this.feeChartInstance, [
                    { value: res.XCmdrResult.should_service_fee, name: '应续服务费' },
                    { value: res.XCmdrResult.actual_service_fee, name: '实际服务费' }
                ])
                this.setAnnularChart(this.deviceChartInstance, [
                    { value: res.XCmdrResult.device_send, name: '终端发货数' },
                    { value: res.XCmdrResult.device_online, name: '终端在线数' }
                ])
                this.setAnnularChart(this.sensorChartInstance, [
                    { value: res.XCmdrResult.sensor_send, name: '传感器发货数' },
                    { value: res.XCmdrResult.sensor_online, name: '传感器在线数' }
                ])
                this.setAnnularChart(this.pushChartInstance, [
                    { value: res.XCmdrResult.total_messages, name: '推送总数' },
                    { value: res.XCmdrResult.total_messages_read, name: '已读数' }
                ])
                this.setAnnularChart(this.alarmChartInstance, [
                    { value: res.XCmdrResult.total_alarms, name: '报警数' },
                    { value: res.XCmdrResult.total_alarms_handle, name: '已处理报警' }
                ])
                this.setLineChart(this.chatChartInstance, '客户近四周聊天数', res.XCmdrResult.week_talk_number.map(item => item.date.substring(5, item.date.length)), res.XCmdrResult.week_talk_number.map(item => item.value))
                this.setLineChart(this.recordChartInstance, '营销跟进记录/实施跟进记录', res.XCmdrResult.week_talk_number.map(item => item.date.substring(5, item.date.length)), res.XCmdrResult.week_talk_number.map(item => item.value))
                this.setLineChart(this.loginChartInstance, '最近一周软件登录数量变动趋势', res.XCmdrResult.week_login_number.map(item => item.date.substring(5, item.date.length)), res.XCmdrResult.week_login_number.map(item => item.value))
                this.setradarChart(this.radarChartInstance, [1000, 3214, 2458, 5542, 4217])

            })

        },
        setradarChart(chart, data) {
            const allValues = data.flatMap(item => item.value);
            const maxValue = Math.max(...allValues);
            const indicatorMax = Math.ceil(maxValue * 1.2); // 增加20%余量
            chart.setOption({
                radar: {
                    axisLabel: {
                        scale: true, // 启用坐标轴自适应
                    },
                    radius: '70%',
                    indicator: [
                        { name: '工时类报表导出', max: indicatorMax },
                        { name: '油位类报表导出', max: indicatorMax },
                        { name: '台版签证单使用频率', max: indicatorMax },
                        { name: '加油记录填写', max: indicatorMax },
                        { name: '设备保养模块', max: indicatorMax }
                    ]
                },
                series: [
                    {
                        type: 'radar',
                        data: [
                            {
                                value: data
                            }
                        ]
                    }
                ]
            })
        },

        setPieCharts(chart, data) {
            chart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })

        },
        setAnnularChart(chart, data) {
            chart.setOption({
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        fontSize: 12
                    },
                    confine: true
                },
                legend: {
                    top: '0px',
                    left: 'center'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            fontSize: 12, // 字体大小（建议根据扇形区域大小调整，通常8-14px）
                            padding: 5, // 文字内边距，避免紧贴扇形边缘
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 12,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data
                    }
                ]
            });
        },
        setLineChart(chart, name, xAxis, data) {
            // 最近四周售后群的聊天记录条数
            chart.setOption({
                title: {
                    text: name,
                    left: 'center',
                    textStyle: {
                        fontSize: 14,
                        fontWeight: 'bold',
                        color: '#333'
                    }
                },
                tooltip: {
                    trigger: 'axis', // 触发类型为坐标轴
                    showDelay: 0, // 显示延迟
                    transitionDuration: 0.2, // 动画过渡时间
                    backgroundColor: 'rgba(255, 255, 255, 0.9)', // 背景色
                    borderColor: '#ccc', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    textStyle: {
                        color: '#333' // 文字颜色
                    },
                    // 自定义提示框内容
                    formatter: function (params) {
                        const param = params[0];
                        return `
                <div style="font-weight: bold;">${param.name}</div>
                <div>数量: ${param.value}</div>
              `;
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisLabel: {
                        interval: 0 // 强制显示所有标签
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data,
                        type: 'line'
                    }
                ]
            });
        },
        setting() {
            this.settingDialogVisible = true
        },
        diagnosis() {
            this.diagnosisDialogVisible = true
        },
        cancel(type) {
            this.dialogVisible = false
        },
        save(type) {
            if (type == "diagnosis") {
                this.diagnosisDialogVisible = false
            } else {

            }

        },
        handleClose(done) {
            done();
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
    background: #f5f5f5;
    height: 100vh;
    overflow-y: auto;
    width: 100%;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card {
        margin-top: 15px;

        &-header {
            display: flex;
            align-items: center;

            &-tag {
                display: flex;
                column-gap: 8px;
                margin-left: 30px;
            }
        }

        .multiple {
            display: flex;

            h4 {
                width: 50%;
            }
        }

        &-content {
            margin-top: 15px;
            display: flex;

            &-left,
            &-right {
                width: 50%;
                display: flex;
                justify-content: space-between;

                .echart {
                    width: 200px;
                    height: 200px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    &-title {
                        text-align: center;
                        margin-bottom: 10px;
                    }

                    ::v-deep .el-progress-circle {
                        width: 140px !important;
                        height: 140px !important;
                    }
                }

                .line {
                    width: 50%;
                    height: 200px;
                }
            }


        }

        &-box {
            margin-top: 15px;
            display: flex;

            &-line {
                width: 50%;
                height: 200px;
            }

            &-right {
                width: 50%;
                display: flex;

                &-item {
                    width: 50%;
                    height: 200px;
                }

            }
        }
    }

    .rows {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        &-title {
            color: #606266;
            font-size: 16px;
            width: 140px;
        }

        &-content {
            margin-left: 45px;


            &-label {
                display: flex;
                background: #ccc;
                cursor: pointer;

                div {
                    width: 60px;
                    height: 18px;
                    text-align: center;
                    line-height: 18px;
                    color: #fff;
                }

                .gao {
                    background: #67C23A;
                }

                .zhong {
                    background: #E6A23C;
                }

                .di {
                    background: #F56C6C;
                }


            }
        }

    }
}
</style>
